<!DOCTYPE html>
<html>
<head>
    <title>Doggo DNS</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link href="assets/style.css" rel="stylesheet">
</head>
<body>
<div class="main">
    <header>
        <h1 class="logo"><span>Doggo</span> DNS</h1>
    </header>

    <form method="post" id="form" class="box">
        <div class="row">
            <div class="field">
                <label for="domain">Domain name</label>
                <input id="domain" name="q" placeholder="domain.tld" required autofocus />
            </div>
            <div class="field">
                <label for="type">Query type</label>
                <select id="type" name="type">
                    <option default>A</option>
                    <option>AAAA</option>
                    <option>CAA</option>
                    <option>CNAME</option>
                    <option>MX</option>
                    <option>NAPTR</option>
                    <option>NS</option>
                    <option>PTR</option>
                    <option>SOA</option>
                    <option>SRV</option>
                    <option>TXT</option>
                </select>
            </div>
        </div>
        <div class="row">
            <div class="field">
                <label for="ns">Nameserver</label>
                <select id="ns" name="ns">
                    <option default value="tcp://1.1.1.1:53">Cloudflare</option>
                    <option value="https://cloudflare-dns.com/dns-query">Cloudflare (DOH)</option>
                    <option value="tcp://8.8.8.8:53">Google</option>
                    <option value="tcp://9.9.9.9:53">Quad9</option>
                    <option value="">Custom</option>
                </select>
            </div>
            <div class="field">
                <label for="address">Nameserver address</label>
                <input id="address" name="address" type="text" placeholder="tcp://your-ip"
                    required pattern="(tcp|udp|tls|https|sdns):\/\/(.*)" />
                <p class="help">
                    To use different protocols like DOH, DOT etc. refer to the instructions
                    <a href="https://github.com/mr-karan/doggo#transport-options">here</a>.
                </p>
            </div>
        </div>
        <div class="row">
            <div class="field"><p id="message"></p></div>
            <div class="field submit">
                <button type="submit">Submit</button>
            </div>
        </div>
    </form>

    <!--Responses-->
    <table class="box hidden" id="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Address</th>
                <th class="type">Type</th>
                <th>TTL</th>
                <th>RTT</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <footer >
        <div>
            <p>Built with
                <span>&#9829;</span> by
                <a href="https://mrkaran.dev"><strong>mrkaran</strong></a>
            </p>
            <p><a href="https://github.com/mr-karan/doggo">Source Code</a></p>
        </div>
    </footer>
    <script src="assets/main.js"> </script>

    <noscript>
        <div class="noscript">
            <h2>This service requires Javascript</h2>
            <p>Please enable JavaScript so that the form data can be sent to the API backend.</p>
        </div>
    </noscript>
</div>
</body>
</html>
